﻿@model pcObjectLibrary.UserObjLibrary
@{
    ViewBag.Title = "Punch Reports";
}
<div class="col-lg-6">
    <div class="well bs-component">
        @using (Ajax.BeginForm("Report", "Punch", null,
                                    new AjaxOptions { HttpMethod = "POST", OnSuccess = "showGridResults" },
                                    new { @class = "form-horizontal", id = "reportForm" }))
        {
            <fieldset>
                <legend>@ViewBag.Title</legend>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input type="radio"
                                   name="searchType"
                                   checked
                                   value="1"
                                   class="ckdPunchReport">
                            Month
                        </label>
                    </div>
                    <div class="col-lg-10">
                        @Html.DropDownList("Month", (IEnumerable<SelectListItem>)(ViewBag.Months), htmlAttributes: new { required = "required", @class = "form-control" })
                        @Html.ValidationMessage("Months", "Please select employee")
                    </div>
                </div>

                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input type="radio"
                                   name="searchType"
                                   value="2"
                                   class="ckdPunchReport">
                            Date Range
                        </label>
                    </div>
                    <div class="col-lg-10">
                        @Html.TextBox("stDate", null, htmlAttributes: new { type = "date", @class = "pDate form-control reportDate", id = "stDate" })
                        @Html.ValidationMessage("stDate", "Required")
                        -
                        @Html.TextBox("enDate", null, htmlAttributes: new { type = "date", @class = "pDate form-control reportDate", id = "enDate" })
                        @Html.ValidationMessage("enDate", "Required")
                    </div>
                </div>

                @if (PunchClock.Helpers.UserHelpers.IsAdmin(user: User) || PunchClock.Helpers.UserHelpers.isHumanResource(user: User))
                {
                    <div class="form-group">
                        @*<label class="col-lg-2 control-label">
                                Employee
                            </label>*@
                        <div class="col-lg-10">
                            @Html.DropDownListFor(x => x.userId, (IEnumerable<SelectListItem>)(ViewBag.users), htmlAttributes: new { required = "required", @class = "form-control" })
                            @Html.ValidationMessage("userId_listbox", "Please select employee")
                        </div>
                    </div>
                }
                @* <li style="height: 45px;">
                        <label>End Date: </label>
                        @Html.TextBox("enDate", null, htmlAttributes: new { type = "date", @class = "pDate", id = "enDate", required="required" })
                         @Html.ValidationMessage("enDate","Please enter end date")
                    </li>*@

                <div class="col-lg-10 col-lg-offset-2">
                    <input type="submit" value="Search" class="btn btn-primary" />
                </div>
            </fieldset>
        }
    </div>
</div>
<div class="clearfix"></div>
<section class="row resultGridSection">
    <section class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Search Results</h3>
        </div>
        <div class="panel-body">
            <section id="resultGrid"></section>
        </div>
    </section>
</section>

<script>
    function showGridResults(data) {
        $(".resultGridSection").show();
        if ($(".k-grid").length) {
            $(".k-grid").after("<section id=\"resultGrid\" class='reCreated'></section>")
            $(".k-grid").remove();
        }
        //$("#resultGrid").parent().html("<section id=\"resultGrid\"></section>");
        $("#resultGrid").kendoGrid({
            columns: [{ field: "punchId", title: "id", hidden: true },
                {
                    field: "punchDate",// create a column bound to the "name" field
                    title: "Date", // set its title to "Name"
                    type: "date",
                    format: "{0:dd-MMM-yyyy}",
                    footerTemplate: "#: kendo.toString(min, 'd') # - #: kendo.toString(max, 'd')#"
                }, {
                    field: "punchDay",// create a column bound to the "age" field
                    //format: "{0:dd-MMM-yyyy}",
                    title: "Day" // set its title to "Age"
                }, {
                    field: "punchIn",// create a column bound to the "age" field
                    title: "In-Time" // set its title to "Age"
                },
            {
                field: "punchOut",// create a column bound to the "age" field
                title: "Out-Time" // set its title to "Age"
            },
            {
                field: "Hours",// create a column bound to the "age" field
                title: "HoursBU", // set its title to "Age"
                footerTemplate: "Total:#:  computeHoursRange(sum)#",
                hidden: true
            },
            {
                field: "HoursNew",// create a column bound to the "age" field
                title: "Hours", // set its title to "Age"
                footerTemplate: "Total:<span id='totalHours'>#: computeHoursRange(data.ApprovedHours.sum) #</span>"
                // groupFooterTemplate: "Average: #: sum #",
                //groupable: false
                // aggregates: [ "sum", "min", "max" ]
                //groupFooterTemplate: "<div>Day Hours:<b> #: sum #</b></div>" //"Day Hours: #: sum #"//, min: #: min #, max: #: max #"
            }],
            dataSource: {
                data: data,
                schema: {
                    parse: function (response) {
                        $.each(response, function (idx, elem) {
                            elem.punchIn = UTCToClientLocal(elem.punchIn.Hours + ":" + elem.punchIn.Minutes + ":" + elem.punchIn.Seconds);
                            elem.punchDay = DayFromDate(elem.punchDate);
                            elem.punchOut = UTCToClientLocal(elem.punchOut.Hours + ":" + elem.punchOut.Minutes + ":" + elem.punchOut.Seconds);
                            //elem.punchDate = elem.punchId != -69 ? UTCDateToClientLocalDate(elem.punchDate) : elem.punchDate;
                            //elem.punchDate = elem.punchId != -69 ? DateToUTC(elem.punchDate) : elem.punchDate;
                            elem.HoursNew = MinutesToTime(elem.Hours);
                            elem.Hours = elem.Hours;
                        });
                        return response;
                    }
                },
                aggregate: [{ field: "HoursNew", aggregate: "sum" },
                    { field: "Hours", aggregate: "sum" },
                    { field: "ApprovedHours", aggregate: "sum" },
                { field: "punchDate", aggregate: "min", format: "{0:dd-MMM-yyyy}" },
                { field: "punchDate", aggregate: "max", format: "{0:dd-MMM-yyyy}" }]
            },
            toolbar: kendo.template($("#ToolBarTemplate").html()),
            rowTemplate: kendo.template($("#rowTemplate").html()),
            altRowTemplate: kendo.template($("#altRowTemplate").html()),
            pageable: {
                pageSize: 10
            },
            //pageable: true,
            scrollable: true,
            sortable: true,
            // groupable: true,
            // height: 400,
        });

        //$("table[role='grid']").addClass("table table-striped table-hover ");
    }
</script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
    # if (punchId == -69){ #
    <tr role="row" class="holidayRow success">
        # } else  if(!requestForApproval || (requestForApproval && isManagerAccepted)){ #
<tr role="row">
        # } else { #
    <tr role="row" class="pendingApproval warning">
        # } #
        <td style="display:none" role="gridcell">#: punchId #</td>
        <td role="gridcell">#: kendo.toString(punchDate, 'd') # </td>
        <td role="gridcell">#: punchDay #</td>
        # if (punchId == -69){ #
        <td role="gridcell">N/A</td>
        <td role="gridcell">N/A</td>
        # } else { #
        <td role="gridcell">#: punchIn #</td>
        <td role="gridcell">#: punchOut #</td>
        # } #

        <td style="display:none" role="gridcell">#: Hours #</td>
        <td role="gridcell">#: HoursNew#</td>

    </tr>

</script>
<script id="altRowTemplate" type="text/x-kendo-tmpl">
    # if (punchId == -69){ #
    <tr role="row" class="k-alt holidayRow success">
        # } else  if(!requestForApproval || (requestForApproval && isManagerAccepted)){ #
<tr role="row" class="k-alt">
        # } else { #
    <tr role="row" class="k-alt pendingApproval warning">
        # } #
        <td style="display:none" role="gridcell">#: punchId #</td>
        <td role="gridcell">#: kendo.toString(punchDate, 'd') #</td>
        <td role="gridcell">#: punchDay #</td>
        # if (punchId == -69){ #
        <td role="gridcell">N/A</td>
        <td role="gridcell">N/A</td>
        # } else { #
        <td role="gridcell">#: punchIn #</td>
        <td role="gridcell">#: punchOut #</td>
        # } #
        <td style="display:none" role="gridcell">#: Hours #</td>
        <td role="gridcell">#: HoursNew#</td>

    </tr>
</script>
<script type="text/x-kendo-template" id="ToolBarTemplate">
    <div class="toolbar">
        @Html.ActionLink("Export", "Export", "Punch", new { @class = "k-button" })
    </div>
</script>
